﻿@model ListenMusic.Models.ViewModel.IndexViewModel

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutPublic.cshtml";
}

    <link href="../../Styles/HomePage.css" rel="stylesheet" type="text/css" />
    <link href="../../Styles/Banner/style2.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/Banner/jquery.easing.js" type="text/javascript"></script>
    <script src="../../Scripts/Banner/script.js" type="text/javascript"></script>  

    <script type="text/javascript">
        $(document).ready(function () {
            var buttons = { previous: $('#jslidernews2 .button-previous'),
                next: $('#jslidernews2 .button-next')
            };
            $('#jslidernews2').lofJSidernews({ interval: 5000,
                easing: 'easeInOutQuad',
                duration: 1200,
                auto: true,
                mainWidth: 598,
                mainHeight: 180,
                navigatorHeight: 85,
                navigatorWidth: 310,
                maxItemDisplay: 3,
                buttons: buttons
            });
        });
</script>
  <div id="wrapper">
     <div id="left-menu">                                                  
            <div id="category-music">
                <h4 class="category">THỂ LOẠI</h4>
                <ul>
                    @foreach (ListenMusic.Category_ServiceReferences.Category c in Model.category)
                    {
                        <li><a href="#">@c.CategoryName</a></li>
                    }                               
                </ul>
            </div>
            <div id="singer-vietnam">
                <h4 class="category">VIỆT NAM</h4>
                    <ul>
                         @foreach (ListenMusic.Singer_ServiceReferences.Singer s in Model.singerVN)
                         {
                           <li><a href="">@s.SingerName</a></li>
                         }                    
                    </ul>
            </div>
            <div id="singer-inter">
                <h4 class="category">QUỐC TẾ</h4>
                    <ul>
                          @foreach (ListenMusic.Singer_ServiceReferences.Singer s in Model.singerAM)
                          {
                             <li><a href="">@s.SingerName</a></li>
                          }                   
                    </ul>
            </div>               
        </div> 
    <div id="middle-content">
       <div id="banner">
                <div id="jslidernews2" class="lof-slidecontent" style="width:598px; height:255px;">
	        <div class="preload"><div></div></div>
            <div  class="button-previous">Previous</div>
    		 <!-- MAIN CONTENT --> 
              <div class="main-slider-content" style="width:430px; height:255px;">
                <ul class="sliders-wrap-inner">
                    <li>                       
                          <img src="../../Images/Banner/thumbl_980x340.png" alt="" width="430px" height="255px" title="Newsflash 2" >           
                          <div class="slider-description">
                            <h4>Album 1</h4>
                            <p>Singer 1</p>                                                     
                         </div>
                    </li> 
                   <li>                      
                      <img src="../../Images/Banner/thumbl_980x340_002.png" alt="" width="430px" height="255px" title="Newsflash 1" >           
                         <div class="slider-description">                           
                            <h4>Album 2</h4>
                            <p>Singer 2</p> 
                         </div>
                    </li> 
                   <li>
                       
                      <img src="../../Images/Banner/thumbl_980x340_003.png" alt="" width="430px" height="255px" title="Newsflash 3" >            
                        <div class="slider-description">
                          <h4>Album 3</h4>
                            <p>Singer 3</p>
                         </div>
                    </li> 
                    <li>
                      <img src="../../Images/Banner/thumbl_980x340_004.png" alt="" width="430px" height="255px" title="Newsflash 5" >            
                        <div class="slider-description">
                          <h4>Album 4</h4>
                            <p>Singer 4</p>
                         </div>
                    </li> 
                    <li>
                      <img src="../../Images/Banner/thumbl_980x340_005.png" alt="" width="430px" height="255px" title="Newsflash 5" >            
                        <div class="slider-description">
                           <h4>Album 5</h4>
                            <p>Singer 5</p>
                         </div>
                    </li>                     
                  </ul>  	
            </div>
 		   <!-- END MAIN CONTENT --> 
           <!-- NAVIGATOR -->
           	<div class="navigator-content">
                  <div class="navigator-wrapper">
                        <ul class="navigator-wrap-inner">
                          <li>
                                <div>
                                    <img src="../../Images/Banner/lofthumbs/791902news3.jpg" alt="" />
                                    <h3> Album 1 </h3>
                                    <p>Singer 1</p>
                                </div>    
                            </li>
                             <li>
                                <div>
                                    <img src="../../Images/Banner/lofthumbs/435576news10.jpg" alt="" />
                                    <h3> Album 2 </h3>
                                    <p>Singer 2</p>
                                </div>    
                            </li>
                
                            <li>
                                <div>
                                    <img src="../../Images/Banner/lofthumbs/641906img1.jpg" alt="" />
                                    <h3> Album 3 </h3>
                                    <p>Singer 3</p>
                                </div>       
                            </li>
                            
                           <li>
                                <div>
                                    <img src="../../Images/Banner/lofthumbs/416719news7.jpg" alt="" />
                                    <h3> Album 4 </h3>
                                    <p>Singer 4</p>
                                </div>   
                            </li>    
                            <li>
                                 <div>
                                    <img src="../../Images/Banner/lofthumbs/641906img1.jpg" alt="" />
                                    <h3> Album 5 </h3>
                                    <p>Singer 5</p>
                                </div>    
                            </li>                          	
                        </ul>
                      
                  </div>
   
             </div> 
          <!----------------- END OF NAVIGATOR --------------------->
          <div class="button-next">Next</div>
 
 		 <!-- BUTTON PLAY-STOP -->
          <div class="button-control"><span></span></div>
          <!-- END OF BUTTON PLAY-STOP -->
           
 </div> 
            </div>
         <div class="content-home">
                    <h4 class="category">ALBUM NỔI BẬT</h4>  
                    <div class="dl-album-video">                        
                         <ul>
                            @foreach (ListenMusic.Album_ServiceReference.Album a in Model.newAlbum)
                            {
                              <li>
                                <a href="mp3/ListSong_Album?aid=@a.AlbumID"><img src="../Images/albums/@a.Picture" width="140" height="160" /></a>
                             </li>
                            }
                        </ul>
                    </div>
                    
                </div>
                <h4 class="category">VIDEO NỔI BẬT</h4>        
                <div class="content-home">
                   
                </div> 
                <h4 class="category">BÀI HÁT NỔI BẬT</h4>
                 <div class="content-home">   
                    <div id="ms-content">
                    <ul>
                        @foreach(ListenMusic.Song_ServiceReference.DataContract_Song ns in Model.newSong)
                        {                           
                                 <li><a href="mp3/listenpage?sid=@ns.SongID">@ns.SongName</a> <br />
                                <span class="sub-detail">
                                    Trình bày: <a class="singer" href="#">@ns.SingerName</a> | Lượt nghe : @ns.CountView
                                </span>
                                <span><a class="action-dl" href="#" title="Thêm vào danh sách yêu thích"></a></span>
                                </li>                           
                        }                         
                       </ul> 
                    </div>  
                </div>  
    </div>
  </div>
  <script type="text/javascript">
      $(document).ready(function () {
          $("a.tab").click(function () {
              $(".active").removeClass("active");
              $(this).addClass("active");
              $(".content").slideUp();
              var content_show = $(this).attr("title");
              $("#" + content_show).slideDown();
          });
      });
</script>
  <div id="toprate">
  <h4 class="category">BẢNG XẾP HẠNG</h4>
    <div class="top-content">
      <div class="tabbed_box_1 tabbed_box">
            <div class="tabbed_area">
             <ul class="tabs">
                        <li><a href="#" title="Song" class="tab active">Bài Hát</a></li>
                        <li><a href="#" title="Video" class="tab">Video</a></li>  
                         <li><a href="#" title="Album" class="tab">Album</a></li>                                      
                    </ul>
            <div style="display: block;" id="Song" class="content">
            <!-- nội dung của Song -->
                <ul>
                    @foreach (ListenMusic.Song_ServiceReference.DataContract_Song ts in Model.topSong)
                    { 
                     <li><a href="mp3/listenpage?sid=@ts.SongID">@ts.SongName</a><br /><a href="#"><small>@ts.SingerName</small></a></li>
                    }                   
                </ul>
            <!-- END nội dung của Song -->
            </div>
            <div style="display: none;" id="Video" class="content">
            <!-- nội dung của Video -->
                <ul>
                  @foreach (ListenMusic.Song_ServiceReference.DataContract_Song tv in Model.topVideo)
                  { 
                     <li><a href="#">@tv.SongName</a><br /><a href="#"><small>@tv.SingerName</small></a></li>
                  }                    
                </ul>
            <!-- END nội dung của Video -->
            </div>
            <div style="display: none;" id="Album" class="content">
            <!-- nội dung của Album -->
                <ul>
                    @foreach (ListenMusic.Album_ServiceReference.DataContract_Album ta in Model.topAlbum)
                    { 
                     <li><a href="#">@ta.AlbumName</a><a href="#"><br /><a href="#"><small>@ta.SingerName</small></a></li>
                    }                     
                </ul>
            <!-- END nội dung của Album -->
            </div>
        </div>
    </div>
</div>   
 </div>
